import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next";
import { useOAuthLogin } from "@/hooks/use-oauth";
import { Gitee, Github } from "./icons";
import type { Provider } from "@/types/oauth";

interface OAuthButtonsProps {
  className?: string;
}

export default function OAuthButtons({ className }: OAuthButtonsProps) {
  const { t } = useTranslation();
  const { login, isLogging } = useOAuthLogin();

  const handleOAuthLogin = (provider: Provider) => {
    login(provider);
  };

  return (
    <div className={`space-y-3 ${className}`}>
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            {t("Or continue with", { defaultValue: "Or continue with" })}
          </span>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <Button
          variant="outline"
          type="button"
          disabled={isLogging}
          onClick={() => handleOAuthLogin("github")}
          className="w-full cursor-pointer"
        >
          {isLogging ? (
            <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
          ) : (
            <Github className="h-4 w-4" />
          )}
          <span className="ml-2">GitHub</span>
        </Button>

        <Button
          variant="outline"
          type="button"
          disabled={isLogging}
          onClick={() => handleOAuthLogin("gitee")}
          className="w-full cursor-pointer"
        >
          {isLogging ? (
            <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
          ) : (
            <Gitee className="h-4 w-4" />
          )}
          <span className="ml-2">Gitee</span>
        </Button>
      </div>
    </div>
  );
}
